<!--user.vue-->
<template>
  <div class="user-profile">
    <h1>用户信息</h1>
    <div v-if="loading">
      <p>加载用户信息..</p>
    </div>
    <div v-else>
      <div v-if="user && Object.keys(user).length">
        <p><strong>姓名:</strong> {{ user.username }}</p>
        <p><strong>手机号:</strong> {{ user.phoneNumber }}</p>
        <p><strong>地址:</strong> {{ user.userAddress }}</p>
        <el-button @click="showUpdateForm" type="primary">更新信息</el-button>
      </div>
      <div v-else>
        <p>没有用户信息</p>
      </div>
      <el-button @click="logout" type="danger">登出</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="Update User Info">
      <el-form :model="form">
        <el-form-item label="Username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="Phone Number">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="Address">
          <el-input v-model="form.userAddress"></el-input>
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="form.password" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="updateUserInfo">Update</el-button>
      </div>
    </el-dialog>
    <Login v-if="loginDialogVisible" @close="closeLoginDialog"></Login>
  </div>
</template>

<script setup>
import { onMounted, computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import Login from './Login.vue';

const store = useStore();
const router = useRouter();
const loading = ref(true);
const dialogVisible = ref(false);
const loginDialogVisible = ref(false);
const form = ref({
  username: '',
  phoneNumber: '',
  userAddress: '',
  password: '',
  registrationDate: '',
  userID: '',
});

const user = computed(() => store.getters['auth/getUserInfo']);

onMounted(() => {
  checkAndFetchUserData();
});

const checkAndFetchUserData = async () => {
  loading.value = true;
  const token = store.getters["auth/getToken"];
  try {
    await store.dispatch('auth/fetchUser', token);
    if (user.value) {
      form.value.username = user.value.username;
      form.value.phoneNumber = user.value.phoneNumber;
      form.value.userAddress = user.value.userAddress;
      form.value.password = user.value.password;
    }
  } catch (error) {
    console.error('Error fetching user data:', error);
    if (error.response?.status === 401) {
      handleUnauthorized();
    }
  } finally {
    loading.value = false;
  }
};

const handleUnauthorized = () => {
  logout();
  loginDialogVisible.value = true;
};

const logout = () => {
  store.dispatch('auth/logout');
  router.push('/login');
};

const showUpdateForm = () => {
  dialogVisible.value = true;
};

const updateUserInfo = async () => {
  try {
    const token = store.getters["auth/getToken"];
    await store.dispatch('auth/updateUser', form.value);
    dialogVisible.value = false;
    await checkAndFetchUserData();
  } catch (error) {
    console.error('Error updating user data:', error);
  }
};

</script>

<style scoped>
.user-profile {
  padding: 20px;
}

.user-profile h1 {
  color: #333;
}

.dialog-footer {
  text-align: right;
}
</style>
